<template>
  <div class="login-container">
    <img class="logo-img" src="@/assets/logo_home.png"/>
    <div class="content-contianer">
      <div class="right">
        <h1 class="system-title">批产信息管理平台</h1>

        <el-button class="right-btn" @click="switchBtnHandle">{{ isLogin ? '注册' : '登录' }}</el-button>
      </div>
      <el-form
        class="login-form"
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
      >
        <img class="logo" src="../assets/login-logo.png"/>
        <div v-if="isLogin" class="form-item-wrap">
          <el-form-item class="form-input" prop="userName" style="margin-top: 0;">
            <el-input
              type="text"
              v-model="ruleForm.userName"
              placeholder="请输入账户名"
              @keypress.enter.native="submitForm('ruleForm')"
            >
            <img slot="suffix" src="../assets/icon/icon-user.png"/>
            </el-input>
          </el-form-item>
          <el-form-item class="form-input" prop="password" style="margin-top: 60px;">
            <el-input
              type="password"
              v-model="ruleForm.password"
              placeholder="请输入密码"
              @keypress.enter.native="submitForm('ruleForm')"
            >
            <img slot="suffix" src="../assets/icon/icon-password.png"/>
            </el-input>
          </el-form-item>
        </div>
        <div v-else class="form-item-wrap">
          <el-form-item class="form-input" prop="userName" style="margin-top: 20px;">
            <el-input
              type="text"
              v-model="ruleForm.userName"
              placeholder="账户名为操作人姓名"
            >
            <img slot="suffix" src="../assets/icon/icon-user.png"/>
            </el-input>
          </el-form-item>
          <el-form-item class="form-input" prop="password">
            <el-input
              type="password"
              v-model="ruleForm.password"
              placeholder="密码不得少于6位"
            >
            <img slot="suffix" src="../assets/icon/icon-password.png"/>
            </el-input>
          </el-form-item>
          <el-form-item class="form-input" prop="newPassword">
            <el-input
              type="password"
              v-model="ruleForm.newPassword"
              placeholder="再次输入密码"
            >
            <img slot="suffix" src="../assets/icon/icon-password.png"/>
            </el-input>
          </el-form-item>
        </div>
        <el-button class="left-btn" @click="submitForm('ruleForm')">
          {{isLogin ? '登录' : '注册'}}
        </el-button>
      </el-form>
    </div>
    <!-- <p class="footer-text">
      <span>设计单位：火箭军驻北京区第一军代室</span>
      <span style="margin-left: 50px;">研制单位：中国科技集团航天一院总体设计部</span>
    </p> -->
  </div>
</template>

<script>
import { loginApis } from '@/apis'
export default {
  name: 'login',
  data() {
    return {
      isLogin: true,
      ruleForm: {
        userName: '',
        password: '',
        newPassword: ''
      },
      rules: {
        userName: [
          { required: true, message: '请输入账户名', trigger: 'blur' },
        ],
        password: [{ required: true, message: '请输入密码', trigger: 'blur' }],
        newPassword: [
          {required: true, message: '请输入密码', trigger: 'blur'},
          {validator: this.newPasswordValidator, trigger: 'blur'}
        ]
      },
    }
  },
  methods: {
    newPasswordValidator(rule, value, callback) {
      if (this.ruleForm.password != value) {
        return callback('密码输入不一致')
      }
      callback()
    },
    submitForm(formName) {
      this.$refs[formName].validate(async (valid) => {
        if (valid) {
          const {userName, password} = this.ruleForm
          if (this.isLogin) {
            const resopnse = await loginApis.userLogin({userName, password})
            this.$router.push({name:"main"})
            this.$store.commit('SET_USER_INFO', resopnse.data)
          } else {
            const resopnse = await loginApis.userRegister({...this.ruleForm})
            this.switchBtnHandle()
            this.$message.success('注册成功')
          }
        } else {
          return false
        }
      })
    },
    switchBtnHandle() {
      this.isLogin = !this.isLogin
      Object.assign(this.ruleForm, {
        userName: '',
        password: '',
        newPassword: ''
      })
    }
  },
}
</script>

<style lang="scss" scoped>
.login-container {
  display: flex;
  justify-content: center;
  align-items: center;
  position: fixed;
  width: 100%;
  height: 100%;
  background-image: url('../assets/login-bg.jpg');
  background-repeat: no-repeat;
  background-position: center;
}
.content-contianer {
  width: 1472px;
  height: 630px;

  .right {
    float: left;
    width: 740px;
    text-align: center;
  }

  .login-form{
    float: right;
    width: 594px;
    height: 682px;
    margin-top: -26px;
    margin-right: 138px;
    padding: 0 64px;
    border-radius: 10px;
    background-image: linear-gradient( 90deg, rgb(134,143,166) 0%, rgb(225,228,237) 100%);
    background-image: -moz-linear-gradient( 90deg, rgb(134,143,166) 0%, rgb(225,228,237) 100%);
    background-image: -webkit-linear-gradient( 90deg, rgb(134,143,166) 0%, rgb(225,228,237) 100%);
    background-image: -ms-linear-gradient( 90deg, rgb(134,143,166) 0%, rgb(225,228,237) 100%);
    box-shadow: 4.95px 4.95px 25.5px 4.5px rgba(0, 0, 0, 0.5);
  }
}
.system-title{
  margin-top: 200px;
  font-size: 60px;
  color: rgb(255, 255, 255);
  line-height: 1;
  font-weight: normal;
  text-align: center;
  text-shadow: 4.95px 4.95px 14.1px rgba(0, 0, 0, 0.75);
}
.system-version{
  margin-top: 50px;
  margin-right: 120px;
  font-size: 30px;
  color: rgb(255, 255, 255);
  line-height: 1;
  text-align: right;
  text-shadow: 4.95px 4.95px 14.1px rgba(0, 0, 0, 0.75);
}

.right-btn,
.left-btn{
  height: 72px;
  padding: 0;
  line-height: 72px;
  font-size: 36px;
  text-align: center;
  border-radius: 36px;
  border: none;

  &:hover,
  &:focus{
    border: none;
  }
}

.right-btn{
  width: 320px;
  margin-top: 164px;
  color: rgb(17, 20, 52);
  background-image: linear-gradient( 90deg, rgb(135,143,167) 0%, rgb(225,228,236) 100%);
  background-image: -moz-linear-gradient( 90deg, rgb(135,143,167) 0%, rgb(225,228,236) 100%);
  background-image: -webkit-linear-gradient( 90deg, rgb(135,143,167) 0%, rgb(225,228,236) 100%);
  background-image: -ms-linear-gradient( 90deg, rgb(135,143,167) 0%, rgb(225,228,236) 100%);
  box-shadow: 4.243px 4.243px 17.6px 2.4px rgba(0, 0, 0, 0.35);
}
.left-btn{
  width: 100%;
  margin-top: 52px;
  color: #fff;
  background-image: linear-gradient( 90deg, rgb(26,72,162) 0%, rgb(0,85,255) 100%);
  background-image: -moz-linear-gradient( 90deg, rgb(26,72,162) 0%, rgb(0,85,255) 100%);
  background-image: -webkit-linear-gradient( 90deg, rgb(26,72,162) 0%, rgb(0,85,255) 100%);
  background-image: -ms-linear-gradient( 90deg, rgb(26,72,162) 0%, rgb(0,85,255) 100%);
  box-shadow: 4.243px 4.243px 17.6px 2.4px rgba(0, 0, 0, 0.35);
}

.logo{
  display: block;
  margin: 46px auto 0 auto;
}
.form-item-wrap{
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: stretch;
  height: 312px;
}

.form-input{
  margin-bottom: 0;
  margin-top: 36px;

  ::v-deep{
    .el-input{
      padding: 12px 72px 12px 12px;
      border-bottom: 2px solid rgb(17, 20, 52);
    }
    .el-input__inner {
      padding: 0;
      font-size: 28px;
      color: rgb(80, 89, 113);
      line-height: 1;
      background: none;
      border: none;
      border-radius: 0;

      &:-internal-autofill-selected {
        padding: 0;
        font-size: 28px;
        line-height: 1;
        border: none;
        border-radius: 0;
        background: none !important;
        color: rgb(80, 89, 113) !important;
      }

      &::placeholder{
        color: rgb(80, 89, 113);
      }
    }

    input:-webkit-autofill, textarea:-webkit-autofill, select:-webkit-autofill {
      background: none;
      color: rgb(80, 89, 113);
    }
    input:-webkit-autofill:hover {
       background: none;
      color: rgb(80, 89, 113);
    }
    input:-webkit-autofill:focus {
       background: none;
      color: rgb(80, 89, 113);
    }

    .el-form-item__error{
      font-size: 18px;
      color: #dedede;
    }
  }
}
.footer-text{
  position: fixed;
  left: 39px;
  bottom: 0;
  font-size: 22px;
  color: rgb(143, 145, 158);
  line-height: 60px;
  text-align: center;
}

.logo-img{
  position: fixed;
  top: 20px;
  right: 20px;
}
</style>
